import React, { useEffect, useState } from "react";
import { Modal, Form } from "antd";
import { modalPropsType } from "@/constants/types";
import { billWriteOffPreview } from "../../services";
import XlSelect from "@/components/Form/XlSelect";

const {Item} = Form;
const labelCol = {span: 5}

const BillPay = ({visible, onCancel, onSubmit, title, currentRow, loading}: modalPropsType) => {
  const [form] = Form.useForm();
  const [info, setInfo] = useState<any>(null);

  const handleSubmit = async () => {
    const res = await form.validateFields();
    onSubmit({
      billIds: info?.billIds || [currentRow?.id],
      paymentId: res?.paymentId
    });
  }

  useEffect(() => {
    if (currentRow?.id) {
      billWriteOffPreview({
        ids: [currentRow?.id]
      }).then(
        res => {
          if (res?.code === '0') {
            setInfo(res?.data);
          } 
        }
      )
    } else {
      setInfo(null);
    }
  }, [currentRow?.id])

  return (
    <Modal
      open={visible}
      maskClosable={false}
      width="600px"
      title={title}
      confirmLoading={loading}
      onCancel={onCancel}
      onOk={handleSubmit}
    >
      <Form form={form} labelCol={labelCol}>
        <Item label="应收单号">
          {currentRow?.billCode}
        </Item>
        <Item label="金额">
          {currentRow?.amount}
        </Item>
        <Item label="付款金额" name="paymentId" rules={[{required: true}]}>
          <XlSelect options={info?.paymentDataList || []} dataValue="paymentId" dataLabel="amount"  />
        </Item>
      </Form>
    </Modal>
  );
}
export default BillPay;